<template>
	<view class="my" :style="{backgroundImage:`url(${userInfo.bg_img})`}">
		  
		<cover-view class="status-bar-cover"></cover-view>
		
		<view >
			<Merchant v-if="shoptag" @fnChange="cancel"/>
			<view class="boxs" v-if="userInfo!=''">
				<view class="my-top box-1">
					<view class="my-top-left" @click="myRouteHop('/member/setting/UserInfo')">
						<view class="Portrait">
							<image style="width: 100rpx;height: 100rpx;border-radius: 50%;border: 1rpx solid #EEEEEE;"
								:src="Portrait" mode=""></image>
						</view>
						<view class="my-top-left-1" style="display: flex; flex-direction: column;">
							<view class="nickname" style="display: flex;align-items: center;">
								<text>{{userInfo.nickname || userInfo.user_name ||userInfo.member_mobile|| " "}}</text>
								<image v-if="userInfo.vip_icon.length > 0" :src="userInfo.vip_icon" mode="aspectFit" style="width: 33px;height: 23px;margin-left: 4px;"></image>
							</view>
							
							<!-- <view class="top-vip">
								<view v-if="userInfo.eh_cust_grade == 2001">
									<image src="/static/images/member02.png" mode="widthFix"></image>
									<text>银卡会员</text>
								</view>
								<view v-else-if="userInfo.eh_cust_grade == 3001">
									<image src="/static/images/member03.png" mode="widthFix"></image>
									<text>金卡会员</text>
								</view>
								<view v-else-if="userInfo.eh_cust_grade == 5001">
									<image src="/static/images/member04.png" mode="widthFix"></image>
									<text>至尊会员</text>
								</view>
								<view v-else class="">
									<image src="/static/images/member01.png" mode="widthFix"></image>
									<text>普通会员</text>
								</view>
							</view> -->
							<!-- <view class="my-top-right" @click.stop="qiehuan" -->
							<view class="my-top-right"
								style="color: #ff6c00;font-size: 30rpx;font-weight: bold;">
								<text style="color: #333;font-size: 24rpx;font-weight: 400;">当前门店：</text>
								<text style="font-size: 24rpx; font-weight: normal;color: #EB5327;margin-right: 28rpx;">{{list.physical_name}}</text>
								<!-- <text style="font-size: 24rpx; color: #333; font-weight: 400;">切换</text> -->
								<!-- <image style="width: 10px;height: 5px;margin-left: 5px;" src="../../static/images/down.png"></image> -->
							</view>
						</view>
					</view>
					 <image style="width: 12px;height: 20px;" src="../../static/images/arrowRight.png" mode=""></image>
				</view>
				<!-- <view class="line1sanchu" @click.stop="qiehuan">
					切换门店
				</view> -->
			</view>
			<view class="" style="display:flex;padding: 0px;margin: 0 20px 14px;" v-if="userInfo!=''" >
				<view @click="towodeyue(0)" style="width: 27%; display: flex;flex-direction: column; padding-left: 14rpx;align-items: flex-start;">
					<view class="Numbers">
						{{Number(userInfo.predepoit) >= "10000"? (userInfo.predepoit/1000).toFixed(2)+"K" : userInfo.predepoit}}
					</view>
					<view style="font-size: 22rpx;color: #333333;line-height: 1;">
						<!-- <image :src="`${picUrl}/jh/ye.png`" mode="" style="width: 90rpx;height: 90rpx;"></image> -->
						 余额
					</view>
				</view>
				<view @click="towodeyue(1)" style="width: 27%; display: flex; flex-direction: column; padding-left: 40rpx;">
					<view class="Numbers">
						{{Number(userInfo.point) >= "10000"? (userInfo.point/1000).toFixed(2)+"K" : userInfo.point}}
					</view>
					<view style="font-size: 22rpx;color: #333333;line-height: 1;">
						<!-- <image :src="`${picUrl}/jh/ye.png`" mode="" style="width: 90rpx;height: 90rpx;"></image> -->
						 积分
					</view>
				</view>
				<view @click="towodeyue(2)" style="width: 27%; display: flex; flex-direction: column; padding-left: 40rpx;">
					<view class="Numbers">
						{{Number(userInfo.point) >= "10000"? (userInfo.point/1000).toFixed(2)+"K" : userInfo.card_amount}}
					</view>
					<view style="font-size: 22rpx;color: #333333;line-height: 1;">
						<!-- <image :src="`${picUrl}/jh/ye.png`" mode="" style="width: 90rpx;height: 90rpx;"></image> -->
						 消费卡
					</view>
				</view>
			</view>
			<!-- <view class="purchase_amount" v-if="userInfo.vip_icon != null && userInfo.vip_icon.length > 0" @click="pushToProcureHistory">
				<span style="color: #333;margin-right: 5px;">剩余采购额度</span>{{userInfo.quota_amount}}
			</view> -->
			<!-- 我的订单 -->
			<view v-for="(item,index) in menuList" :key="index">
				<image class="khjl" v-if="index==0" :src="`${picUrl}/mobile_khjl.png`" mode="" :lazy-load="true"></image>
				<view class="my-box">
					<view class="flex2 modeName">
						<text>{{item.type_name}}</text>
					</view>
					<view class="ModeBox flex grcontent" v-if="index==0">
						<view class="grcontent-centent" @click="myRouteHop(itm.url)" v-for="(itm,idx) in item.menu"
							:key="idx">
							<view style="" class="fs24 jiaobiao" v-if="Number(itm.num)>0 ">
								{{itm.num||""}}
							</view>
							<view class="bill_center">
								<image :src="itm.imgurl" mode="aspectFit" :lazy-load="true"></image>
							</view>
							<view style="line-height: 1.2; font-size: 13px;">{{itm.title}}</view>
						</view>
					</view>
					<view class="ModeBox flex" v-if="index!=0">
						<view @click="myRouteHop(itm.url)" class="grcontent-centent funct" v-for="(itm,idx) in item.menu"
							:key="idx">
							<view style="right: 30rpx; top: -10rpx;" class="fs24 jiaobiao" v-if="Number(itm.num)>0 ">
								{{itm.num||""}}
							</view>
							<view class="center">
								<image :src="itm.imgurl" mode="aspectFit" :lazy-load="true"></image>
							</view>
							<view style="line-height: 1; font-size: 13px;color: #666;">{{itm.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
		
	</view>
</template>

<script>
	import Merchant from '@/components/qiehuan/merchant-selection.vue'
	export default {
		components: {
			Merchant
		},
		data() {
			return {
				shoptag: false,
				token: "",
				userInfo: "",
				status: "",
				Banner: "",
				Portrait: "",
				isIos: false,
				menuList: [],
				list: [],

				leftStyle: 0,
				startX: 0,
				hiddenFlag: true,
				delBtnWidth: 220,
			}
		},
		onShow() {
			this.getXXX()
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.isIos = false
					break;
				case 'ios':
					// #ifdef APP-PLUS
					this.isIos = true
					// #endif
					break;
			}
			this.leftStyle = 0
			if (uni.getStorageSync("key")) {
				this.token = uni.getStorageSync("key") || "";
				this.member_id = uni.getStorageSync('api_member_id')
				uni.setStorageSync("headPortrait", true)
			} else {
				uni.navigateTo({
					url: "/mainA/login/login"
				})
			}
		},
		methods: {
			myRouteHop(url) { //路由转跳
				if (url == '/SupplyEnd/login/login' && uni.getStorageSync("supply_userinfo")) {
					uni.navigateTo({
						url:"/SupplyEnd/taber/home"
					})
					return
				}
				if (url == '/shop/login/login' && uni.getStorageSync("shop_userinfo")) {
					uni.navigateTo({
						url:"/shop/good/index"
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			pushToProcureHistory(){
				uni.navigateTo({
					url: '../../member/procureHistory'
				});
			},
			//是否是微信内置浏览器
			isWeiXin() {
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
				// #endif
			},
			lgoinOut() {
				uni.clearStorage();
				uni.switchTab({
					url: "home"
				})
			},
			async getXXX() {
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=index',
					method: 'POST',
					data: {}
				}).then(res => {
					if (res.error_code == 0) {
						this.gitMenu()
						let headPortrait = uni.getStorageSync("headPortrait") || "";
						console.log(res.datas);
						this.userInfo = res.datas.member_info;
						if (this.userInfo.predepoit) {
							this.userInfo.predepoit = res.datas.member_info.freeze_predeposit * 1 + res.datas
								.member_info.predepoit * 1
						}
                        console.log('当前门店信息', res.datas.physical_info)
						uni.setStorageSync("physical_info",res.datas.physical_info)
						uni.setStorageSync('physical_id', res.datas.physical_info.physical_id)
						this.list = res.datas.physical_info
						this.$set(this.list)
						if (headPortrait) {
							this.Portrait = res.datas.member_info.avator
							uni.setStorageSync("headPortrait", false)
						}
						this.Banner = res.datas.adv_list;
					} else {
						uni.showToast({
							title: '未登录，请先登录！',
							icon: "none"
						})
					}

				})
			},
			gitMenu() { //获取目录
				this.$util.request({
					url: '/mobile/index.php?act=member_menu&op=index',
					method: 'get',
					data: {}
				}).then(res => {
					if (res.error_code == 0) {
						if(res.datas.list&&res.datas.list[2]){
							res.datas.list[2].menu = res.datas.list[2].menu.filter(item => item.menu_id !== '36');					
						}
												// this.menuList = res.datas.list
						if(res.datas.list&&res.datas.list[3]){
							res.datas.list[3].menu = res.datas.list[3].menu.filter(item =>!(item.menu_id == '31'||item.menu_id == '32') );					
						}						this.menuList = res.datas.list
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}

				})
			},
			noPage() {
				uni.showToast({
					title: '该功能暂未开放',
					duration: 2000,

				});
			},
			todistributionList() {
				uni.navigateTo({
					url: "/member/distribution/index"
				})
			},

			towodeyue(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/member/wallet/wallet'
					})
				} else if(index == 1) {
					uni.navigateTo({
						url: '/member/wallet/integral'
					})
				} else{
					console.log(123);
					uni.navigateTo({
						url:'/operation/voucher/couponList',
					})
				}
			},
			// 开始移动时
			touchS({
				touches
			}) {
				// startX记录开始移动的位置
				if (touches.length === 1) {
					this.startX = touches[0].clientX;
				}
				// hiddenFlag为true则是从右向左，为false则是从左向右
				if (this.leftStyle === 0) {
					this.hiddenFlag = true;
				} else {
					this.hiddenFlag = false;
				}
			},
			touchM({
				touches
			}) {
				if (touches.length === 1) {
					const moveX = touches[0].clientX;
					this.moveFunc(moveX);
				}
			},
			touchE({
				touches
			}) {
				const {
					leftStyle
				} = this;
				const {
					delBtnWidth
				} = this;
				if (-leftStyle > delBtnWidth / 2) {
					this.leftStyle = -delBtnWidth;
				} else {
					this.leftStyle = 0;
				}
			},
			moveFunc(moveX) {
				const disX = moveX - this.startX;
				const delBtnWidth = this.delBtnWidth;
				let offsetNum = 0;
				if (-disX >= delBtnWidth && this.leftStyle === -delBtnWidth) {
					return;
				}
				console.log(disX, this.hiddenFlag);
				if (this.hiddenFlag) {
					if (disX == 0 || disX > 0) {
						offsetNum = 0;
					} else {
						offsetNum = disX;
						if (disX <= -delBtnWidth) {
							offsetNum = -delBtnWidth;
						}
					}
				} else {
					if (disX < 0) {
						offsetNum = -this.delBtnWidth;
					} else {
						offsetNum = -this.delBtnWidth + disX;
						if (offsetNum > 0) {
							offsetNum = 0;
						}
					}
				}
				this.leftStyle = offsetNum;
			},
			qiehuan() {
				this.shoptag = true
				// #ifndef H5
				uni.setNavigationBarTitle({
					title: '门店'
				})
				// #endif 
			},
			cancel() {
				this.shoptag = false
				this.getXXX()
				// #ifndef H5
				uni.setNavigationBarTitle({
					title: '我的'
				})
				// #endif 
			},

		}
	}
</script>

<style scoped lang="scss">
	page {
		//background: linear-gradient(180deg, #FFF5F2 0%, #F6F6F6 100%);
		background-color: #F5F5F5;
		/* 设置页面状态栏为透明 */
		--status-bar-height: var(--status-bar-height);
		/* 如果是iOS，需要额外的样式来确保内容不会被遮挡 */
		padding-top: var(--status-bar-height);
	}
	
	.purchase_amount {
		background-image: url('@/static/images/purchaseAmount.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		margin: 0 15px 10px;
		height: 36px;
		line-height: 36px;
		padding-left: 10px;
		color: #EB5327;
	}

	.my {
		// background-image: url('@/static/images/top-pic.png'); /* 替换为你的图片路径 */
		// background-size: cover;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top|center;
		position: relative;
		width: 100%;
	}
	
	.status-bar-cover {
		height: var(--status-bar-height); /* 状态栏的高度 */
		width: 100%;
		position: absolute;
		top: 0;
		background-color: transparent;
	}

	.my {
		/* #ifndef H5 */
		overflow-x: hidden;
		overflow-y: hidden;
		/* #endif */
	}

	.flex {
		display: flex;
		flex-wrap: wrap;
	}

	.flex1 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.flex2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.my-top {
		height: 159rpx;
		border-radius: 10rpx;
		margin: 30rpx auto 0;
		box-sizing: border-box;
		font-weight: 400;
		color: #323232;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;

		.my-top-left {
			// width: 49%;
			display: flex;
			align-items: center;

			.Portrait {
				margin-right: 20rpx;
				width: 100rpx;
				height: 100rpx;
			}

			.my-top-left-1 {
				display: flex;
				align-items: flex-start;
				flex-direction: column;

				.nickname {
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					line-height: 49rpx;
					// word-break: break-all;
					// display: -webkit-box;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// -webkit-box-orient: vertical;
					// -webkit-line-clamp: 2;
				}

				.top-vip {
					margin-top: 18rpx;
					font-size: 18rpx;
					line-height: 0;
					display: flex;
					align-items: center;

					image {
						width: 25rpx;
						height: 25rpx;
						margin-right: 5rpx;
					}
				}
			}
		}

		.my-top-line {
			width: 1rpx;
			height: 80rpx;
			background: #EEEEEE;
		}

		.my-top-right {
			// width: 49%;
			// display: flex;
			// align-items: center;
			// justify-content: space-around;
			// text-align: center;
		}
	}

	.my-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto 20rpx;
		padding: 20rpx 0 0;
		box-sizing: border-box;
		font-weight: 400;
		color: #323232;
		font-size: 24rpx;
	}
	
	.khjl{
		width: 690rpx;
		height: 158rpx;
		margin: 14rpx 31rpx;
		border-radius: 16rpx;
	}

	.Numbers {
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
		// margin-right: 40rpx;
	}

	.title {
		border: 0px;
		font-size: 40rpx;
		color: #796a6a;
		border: 0;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
	}

	.modeName {
		font-size: 30rpx;
		padding: 0 10px 10px;
		box-sizing: border-box;
		border-bottom: #EEEEEE 2rpx solid;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ModeBox {
		background-color: #fff;
		border-radius: 10rpx;
		padding-bottom: 15px;
	}

	.grcontent {
		border-radius: 10rpx;
	}

	.grcontent-centent {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		margin-top: 15px;
		// margin-bottom: 12px;
	}

	.jiaobiao {
		color: #FFFFFF;
		position: absolute;
		right: 15rpx;
		top: -15rpx;
		background-color: #ff4300;
		padding: 0 4px;
		border-radius: 50%;
		height: 20px;
		line-height: 20px;
		min-width: 12px;
		text-align: center;
		z-index: 10;
		font-size: 12px;
	}

	.bgco {
		background-color: #ff4300;
		position: absolute;
		top: -100rpx;

		z-index: 0;
		width: 100%;
		height: 280rpx;
		/* #ifdef APP-PLUS */
		height: 400rpx;
		/* #endif */
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;

	}


	.funct {
		width: 25%;
		text-align: center;
		// margin-top: 12px;
		// margin-bottom: 12px;
	}

	.center {
		margin-top: 0rpx;
	}

	.center image {
		width: 36px;
		height: 36px;
		// background-color: #ff000080;
	}
	
	.bill_center image {
		width: 26px;
		height: 26px;
	}
	

	.box {
		// width: 50%;
		// flex: 1;
		display: flex;
		justify-content: flex-start;
		padding: 0 30rpx;
		align-items: center;
		height: 100rpx;
	}


	.InfoBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin: 100rpx 30rpx 30rpx;
		/* #ifdef MP-WEIXIN */
		margin: 120rpx 30rpx 30rpx;
		/* #endif */
		border-radius: 30rpx;
		position: relative;
	}



	.banner {
		width: 100%;
		height: 200rpx;
		overflow: hidden;
	}

	.banner image {
		width: 100%;
		/* height: 100%; */
	}

	.f4-b:last-child {
		border: 0upx;
	}

	.uni-page-body {
		background-color: #FFF;
	}

	/* 内容 */
	.f4-b {
		border-bottom: 1upx solid #e9e9e9;
		padding: 40upx 0 !important;
	}

	.f4-b>view view {
		text-align: center;
	}

	.f4-b>view {
		width: 25%;
	}



	/* 头部 */
	.ger .ger2 .djq {
		margin-right: 60upx;
	}

	.ger .ger2 {
		margin-right: 10upx;
	}

	.ger .ger2 .tix {
		background-color: #900f44;
		padding: 3upx 25upx;
		border-radius: 10upx;
	}

	.ger {
		padding: 20upx;
	}

	.ger .ger1 .g1 {
		margin-right: 24upx;
		margin-top: 10upx;

	}

	.ger .ger1 .g1 image {
		width: 133upx;
		height: 133upx;
		border-radius: 50%;
	}

	.ger .ger1 .g2 image {
		width: 24upx;
		height: 33upx;
	}




	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #ff4300;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		/* background-color: #d7d3d5; */
		background-color: #ff4300;
		top: 0;
		z-index: 999;
	}

	.boxs {
		position: relative;
		display: flex;
		align-items: center;
		// width: 920rpx;
		overflow-x: auto;
	}

	.line1sanchu {
		width: 78px;
		height: 78px;
		background: #E96A1D;
		border-radius: 0px 5px 5px 0px;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 78px;
		text-align: center;
		flex: 0.3;
	}

	.box-1 {
		// margin-right: 30rpx;
		margin: 20px 20px 0;
	}
</style>